<script setup lang="ts">

//导入图标组件
import { ArrowDown } from '@element-plus/icons-vue'
//获取仓库
import useLayOutSettingStore from '../../../store/modules/setting.js'
import useUserStore from '../../../store/modules/user.js'
import { useRouter } from 'vue-router';
let router = useRouter()
let lay = useLayOutSettingStore()
let user = useUserStore()

const head = localStorage.getItem('head') || ''//获取本地存储用户头像
const name = localStorage.getItem('username') || ''
console.log(head)

// 更新刷新状态
const updateRefsh = () => {
    // 取反操作
    lay.refsh = !lay.refsh
}
//全屏按钮
const fullScreen=() =>{
    let full = document.fullscreenElement
    if(!full){
        document.documentElement.requestFullscreen()
    }else{
        document.exitFullscreen()
    }
}

//退出登录‘
const out =  ()=>{
// 退出登录1.需要向服务器发请求【退出登录接口】，告诉服务器这个token不要了，下次登录的时候获取新的token
//2.清空仓库中存储的用户相关数据
//3.跳转到登录页面
user.outLogin()
// 跳转到登录页面
router.push("/login")
}
</script>

<template>
  <!-- 刷新按钮 - 添加点击事件 -->
  <el-button size="small" icon="Refresh" circle @click="updateRefsh"></el-button>
  <!-- 全屏按钮 - 移除错误的点击事件 -->
  <el-button size="small" icon="FullScreen" circle @click="fullScreen"></el-button>
  <el-button size="small" icon="Setting" circle></el-button>
  <img :src="head" style="width:24px;height:24px;margin:0px 10px;object-fit:cover;border-radius:50%"/>
  <!-- 下拉菜单 -->
  <el-dropdown>
    <span class="el-dropdown-link">
      {{ name }}
      <el-icon class="el-icon--right">
        <ArrowDown />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="out">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>
